<template>
  <!--batchCar el-dialog start -->
  <el-dialog title="编辑车辆信息" ref="form" :model="form" :visible.sync="importCarVisible"  @close="close" width="30%" class="dialog-container">
    <el-form class="dialog-container-form">
      <el-form-item label="车牌号">
        <el-input v-model="form.car_no" placeholder="请填写车牌号"></el-input>
      </el-form-item>
      <el-form-item label="车型型号ID">
        <el-input v-model="form.car_model_id" placeholder="请填写车牌号"></el-input>
      </el-form-item>
      <el-form-item label="租赁价格">
        <el-input v-model="form.rent_fee" placeholder="请填写租赁价格/元/天"></el-input>
      </el-form-item>
      <el-form-item label="取车地点">
        <el-input v-model="form.pickup_location" placeholder="请填写取车详细地址"></el-input>
      </el-form-item>
      <el-form-item label="取车地经度">
        <el-input v-model="form.pickup_longitude" placeholder="请填写取车地经度"></el-input>
      </el-form-item>
      <el-form-item label="取车地维度">
        <el-input v-model="form.pickup_latitude" placeholder="请填写取车地维度"></el-input>
      </el-form-item>
      <el-form-item label="还车地点">
        <el-input v-model="form.return_location" placeholder="请填写还车地点"></el-input>
      </el-form-item>
      <!-- <el-form-item label="取车时间">
        <el-input v-model="form.pickup_time" placeholder="请选择取车时间"></el-input>
      </el-form-item>
      <el-form-item label="还车时间">
        <el-input v-model="form.return_time" placeholder="请选择还车时间"></el-input>
      </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="importCarVisible = false">取 消</el-button>
      <el-button type="primary" @click.native="save">保 存</el-button>
    </span>
  </el-dialog>
  <!--batchCar el-dialog end -->
</template>

<script>
import { putCarInfo } from './server'
export default {
  data () {
    return {
      form: {
        car_no: '', // 车牌号
        car_model_id: '', // 车辆的车型id
        pickup_location: '', // 取车详细地点信息
        return_location: '', // 还车详细地点信息
        pickup_longitude: null, // 取车地经度
        pickup_latitude: null, // 取车地维度
        pickup_time: '', // 取车时间
        return_time: '', // 还车时间
        rent_fee: '', // 租赁价格
        car_info: {
          car_gear: '',
          car_old: '',
          lease_time: '整月起租'
        } // 车辆基础信息
      },
      importCarVisible: false
    }
  },
  methods: {
    close () {
      this.importCarVisible = false
      this.$emit('close', false)
      this.form = {}
    },
    async save () {
      const query = `?car_id=${this.form.car_id}`
      const res = await putCarInfo(this.form, query)
      if (res.code === 'ok') {
        this.$message({
          type: 'success',
          message: '编辑成功'
        })
      }
      this.close()
    }
  },
  props: {
    flag: {
      type: Boolean,
      default: false
    },
    carList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  watch: {
    flag: {
      handler (newValue, oldValue) {
        this.importCarVisible = newValue
      }
    },
    carList: {
      handler (newValue, oldValue) {
        this.form = Object.assign({}, newValue)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import './index.scss'
</style>
